<template>
  <div class="client-info">
    <div class="title">基本信息</div>
    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="2" viewBox="0 0 400 2" fill="none">
      <path d="M0 1H400" stroke="#E8E8EB" />
    </svg>
    <div class="mt-24"></div>
    <div v-for="it in infoArr" :key="it.label" class="info-item">
      <div>{{ it.label }}</div>
      <div v-if="it.type === 'license' && it.val" class="fbc">
        <div>{{ it.val }}</div>
        <a-button v-if="isAdmin && checkKey('user-list-license-download')" type="link" class="icon-only-btn" @click="downloadLicense">
          <i class="iconfont icon-download-2-line"></i>
        </a-button>
        <a-button
          v-else-if="!isAdmin && checkKey('student-list-license-download')"
          type="link"
          class="icon-only-btn"
          @click="downloadLicense"
        >
          <i class="iconfont icon-download-2-line"></i>
        </a-button>
      </div>
      <div v-else class="elliptical-5" :title="it.val">{{ it.val || '/' }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { inject } from 'vue'

  import { checkKey } from '@/directives/auth'
  import { clientApi, fetchDownload } from '@/services/api'

  export interface ArrItem {
    label: string
    val: string
    type?: 'text' | 'license'
  }

  export interface Props {
    appId: string
    infoArr: ArrItem[]
  }
  const props = withDefaults(defineProps<Props>(), {
    appId: '',
    infoArr: () => []
  })

  const isAdmin = inject('isAdmin')
  console.log('isAdmin', isAdmin)

  const downloadLicense = async () => {
    try {
      const { data } = await clientApi.downLicense({}, { urlParams: { id: props.appId } })
      await fetchDownload(data.fileUrl, data.fileName)
      message.success({ content: '文件下载成功', key: 'downloading', duration: 2 })
    } catch (error) {
      message.error({ content: '文件下载失败', key: 'downloading', duration: 2 })
    }
  }
</script>

<style lang="less" scoped>
  .client-info {
    overflow: hidden;
    padding: 16px 24px;
    margin-right: 40px;
    width: 448px;
    height: 100%;
    background: @background2;
    border: 1px solid @border1;
    border-radius: 6px;

    .title {
      .font14b();
    }

    .info-item {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 36px;

      & > div {
        padding: 0 8px;
        word-break: break-all;
        line-height: 20px;
      }

      & > div:nth-of-type(1) {
        width: 120px;
        color: @text02;
      }

      & > div:nth-of-type(2) {
        flex: 1;
        color: @text01;
      }

      & + .info-item {
        margin-top: 16px;
      }
    }
  }
</style>
